<template>
    <div class="formDiv">
        <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="125px"
                class="demo-ruleForm"
                :size="formSize"
        >
            <el-form-item label="学生证照片" prop="avatar" class="avatarDiv">
                <el-upload
                        class="avatar-uploader"
                        :auto-upload="false"
                        accept=".jpeg,.png,.jpg"
                        list-type="picture"
                        :on-change="getFile"
                        :on-preview="handlePictureCardPreview"
                        name="avatarFile"
                        ref="uploadRef">
                    <el-icon class="avatar-uploader-icon">
                        <Plus/>
                    </el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <el-image  :src="dialogImageUrl" fit="fill" />
                </el-dialog>
            </el-form-item>
            <el-form-item label="真实姓名" prop="trueName" class="avatarDiv">
                <el-input v-model="ruleForm.trueName" class="inputDiv"/>
            </el-form-item>
            <el-form-item label="学号" prop="idCode" class="avatarDiv">
                <el-input v-model="ruleForm.idCode" class="inputDiv" maxlength="18"/>
            </el-form-item>


            <el-form-item class="buttonDiv ">
                <el-button type="primary" @click="submitForm">
                    提交
                </el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script setup>
    import {useStore} from "vuex";
    import {reactive, ref} from "vue";
    import {Plus} from '@element-plus/icons-vue'
    import {ElMessage, ElMessageBox, UploadProps} from 'element-plus'
    import { UserFilled } from '@element-plus/icons-vue'
    // import {updateTeacherMessage} from "@/api/teacher";
    import {useRouter} from 'vue-router'
    import router from "@/router";
    import {launchToTeacher, updateUserMessage} from "@/api/user";
    const store = useStore();
    const formSize = ref('large');
    const ruleFormRef = ref();
    const uploadRef = ref();
    const dialogVisible = ref(false);
    const dialogImageUrl = ref('');

    const ruleForm = reactive({
        id:'',
        trueName: '',
        idCode: '',
        certificateFile: {},
    });

    const rules = reactive({
        trueName: [
            {required: true, message: '请输入真实姓名', trigger: 'blur'},
            {pattern:/^[\u4e00-\u9fa5]+$/,message: "请输入中文名",trigger: "change"}
        ],
        idCode:[{required: true, message: '请输入身份证号', trigger: 'blur'},
            {min:12,max:12,message: '学号默认12位', trigger: 'blur'},
            // {pattern:/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}([0-9Xx])$/,message: "请输入正确的身份证号",trigger: 'change'}
            ]
    });
    const getFile = (rawFile) => {
        ruleForm.certificateFile = rawFile.raw
    }
    const handlePictureCardPreview = (uploadFile)=>{
        // console.log(uploadFile)
        dialogImageUrl.value = uploadFile.url
        dialogVisible.value = true
    }
    //提交
    const submitForm = ()=>{
        ruleFormRef.value.validate((valid)=>{
            if (valid){
                if (beforeCertificateUpload(ruleForm.certificateFile)){
                    ElMessageBox.confirm(
                        '确认提交教师认证',
                        '教师认证',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    )
                        .then(() => {
                            ruleForm.id = store.getters.getId;
                            launchToTeacher(ruleForm).then((res)=>{
                                store.commit("saveIsTeacher",1);
                                ElMessage.success("提交通过，等待审核");
                                setTimeout(()=>{
                                    router.push({path:"/"})
                                },500)
                            })
                        })
                        .catch(() => {
                            ElMessage({
                                type: 'info',
                                message: '取消操作',
                            })
                        })

                }


            }
        })
    }
    const beforeCertificateUpload = (rawFile) => {
       if (rawFile.size / 1024 / 1024 > 2) {
            ElMessage.warning('认证资料大小不能超过2MB');
            return false;
        }
        return true;
    };

</script>

<style scoped>
    .avatar-uploader .avatar {
        width: 170px;
        height: 170px;
        display: block;
    }

    .formDiv {
        background-color: white;
        width: 80%;
        margin: 10px auto;
    }

    .avatarDiv {
        display: flex;
        align-items: baseline;
        padding-top: 10px;
        padding-left: 30px;
    }

    .buttonDiv {
        padding-bottom: 10px;
        padding-top: 20px;
    }

    .inputDiv {
        width: 250px;
    }

</style>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>